<template>
  <div class="content-bd">
    <div class="content-left">
      <section class="practice">
        <header class="section-hd">
          <span class="section-title-l"></span>
          <h2 class="section-title">实践经历</h2>
          <span class="section-title-r"></span>
        </header>
        <div class="section-bd">
          <div class="item">
            <header class="item-hd">
              <!-- item-name公司名字 -->
              <h3 class="item-name"></h3>
              <!-- item-name 时间 -->
              <span class="item-time">2020.7</span>
              <a class="btn item-more"
                 href="#"
                 target="_blank" title="点击查看->">实践经历</a>
            </header>
            <ol class="item-project">
              <li class="project-1">
                <h3 class="project-name">
                  <a href="http://mmall.zyjblogs.cn" target="_blank"
                     title="点击进入->">基于JAVAEE企业级电商网站平台开发</a></h3>
                <ol>
                  <li class="project-2">
                    <div class="item-bd">
                      <h3 class="project-name-2">电商平台后端</h3>
                      <div class="div-item">
                        <h3 class="project-des">【项目简介】</h3>
                        <p class="item-project-des">
                          该项目为企业级电商平台，前后端分离。为用户提供便捷的购物体验，包括商品管理、订单管理、购物车管理、支付等主要功能。后端开发语言采用Java，主要采用Spring boot + MyBatis
                          作为后端基础服务框架；项目后端模块主要包含：用户注册登录验证、短信验证、支付宝沙箱支付、订单管理、发货管理、商品管理、收货地址管理等模块组成。</p>
                      </div>
                      <div class="div-item">
                        <h3 class="project-des">【软件架构】</h3>
                        <p class="item-project-des">
                          SpringBoot、SpringMVC、MyBatis、redis、git
                        </p>
                      </div>
                      <div class="div-item">
                        <h3 class="project-des">【实践内容】</h3>
                        <ul class="section-content">
                          <li>数据库设计</li>
                          <li>前后端分离开发</li>
                          <li>根据接口文档进行编码</li>
                          <li>与支付宝沙箱、腾讯云短信服务对接</li>
                          <li>对接七牛云对象服务服务</li>
                          <li>Nginx+Tomcat负载均衡集群搭建部署</li>
                          <li>使用Git版本控制</li>
                        </ul>
                      </div>
                    </div>
                  </li>
                  <li class="project-2">
                    <div class="item-bd">
                      <h3 class="project-name-2">电商平台前端</h3>
                      <div class="div-item">
                        <h3 class="project-des">【项目简介】</h3>
                        <p class="item-project-des">
                          本项目为电商平台前端、面向用户。实现用户短信注册、登录模块、商品模块、购物模块、购物车、收货地址模块、搜索、支付宝沙箱模块等多模块，
                          向用户提供基本购物需求。
                        </p>
                      </div>
                      <div class="div-item">
                        <h3 class="project-des">【软件架构】</h3>
                        <p class="item-project-des">
                          HTML、CSS、JavaScript、JQuery、Ajax、Webpack、git
                        </p>
                      </div>
                      <div class="div-item">
                        <h3 class="project-des">【实践内容】</h3>
                        <ul class="section-content">
                          <li>使用webpack打包工具进行模块化开发</li>
                          <li>设计前端页面</li>
                          <li>根据接口文档进行编码</li>
                          <li>使用Git版本控制</li>
                        </ul>
                      </div>
                      <div class="div-item">
                        <h3 class="project-des">【项目地址】</h3>
                        <ul class="section-content">
                          <li>
                            <a href="http://mmall.zyjblogs.cn">
                              http://mmall.zyjblogs.cn
                             </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </li>
                  <li class="project-2">
                    <div class="item-bd">
                      <h3 class="project-name-2">电扇平台管理员前端</h3>
                      <div class="div-item">
                        <h3 class="project-des">【项目简介】</h3>
                        <p class="item-project-des">
                            本项目为电商平台管理员前端，面向商户提供商品信息增删查改、、上下架、订单查改、发货、商品品类管理数据统计等服务。
                        </p>
                      </div>
                       <div class="div-item">
                        <h3 class="project-des">【软件架构】</h3>
                        <p class="item-project-des">
                          HTML、CSS、JavaScript、JQuery、Ajax、Webpack、git
                        </p>
                      </div>
                      <div class="div-item">
                        <h3 class="project-des">【实践内容】</h3>
                        <ul class="section-content">
                          <li>使用webpack打包工具进行模块化开发</li>
                          <li>设计管理员前端页面</li>
                          <li>根据接口文档进行编码</li>
                          <li>使用Git版本控制</li>
                        </ul>
                      </div>
                      <div class="div-item">
                        <h3 class="project-des">【项目地址】</h3>
                        <ul class="section-content">
                          <li>
                            <a href="http://admin.zyjblogs.cn">
                              http://admin.zyjblogs.cn
                             </a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </li>
                </ol>
              </li>
            </ol>
          </div>
        </div>

       <div class="section-bd">
         <div class="item">
           <header class="item-hd">
             <!-- item-name公司名字 -->
             <h3 class="item-name"></h3>
             <!-- item-name 时间 -->
             <span class="item-time">2020-05</span>
             <a class="btn item-more"
                href="#"
                target="_blank" title="点击查看->">实践经历</a>
           </header>
           <ol class="item-project">
             <li class="project-1">
               <h3 class="project-name">
                 <a href="http://mmall.zyjblogs.cn" target="_blank"
                    title="点击进入->">基于SSM的学生管理系统</a></h3>
               <ol>
                 <li class="project-2">
                   <div class="item-bd">
                     <h3 class="project-name-2">学生管理系统后端</h3>
                     <div class="div-item">
                       <h3 class="project-des">【项目简介】</h3>
                       <p class="item-project-des">
                          面向接口开发、实现双重身份登录，完成对学生信息、管理员信息、部门信息的增删改查
                        </p>
                     </div>
                     <div class="div-item">
                       <h3 class="project-des">【软件架构】</h3>
                       <p class="item-project-des">
                         Spring、SpringMVC、MyBaits
                       </p>
                     </div>
                     <div class="div-item">
                       <h3 class="project-des">【实践内容】</h3>
                       <ul class="section-content">
                         <li>数据库设计</li>
                         <li>整体架构设计</li>
                         <li>根据接口文档进行编码</li>
                       </ul>
                     </div>
                   </div>
                  </li>
                  <li class="project-2">
                   <div class="item-bd">
                     <h3 class="project-name-2">学生管理系统前端</h3>
                     <div class="div-item">
                       <h3 class="project-des">【项目简介】</h3>
                       <p class="item-project-des">
                          实现双重身份登录，完成对学生信息的增删改查。
                        </p>
                     </div>
                     <div class="div-item">
                       <h3 class="project-des">【软件架构】</h3>
                       <p class="item-project-des">
                         HTML、JavaScript、CSS、Jquery、Ajax、JSP、EasyUI
                       </p>
                     </div>
                     <div class="div-item">
                       <h3 class="project-des">【实践内容】</h3>
                       <ul class="section-content">
                         <li>设计UI界面</li>
                         <li>整体架构设计</li>
                         <li>根据接口文档进行编码</li>
                       </ul>
                     </div>
                   </div>
                 </li>
               </ol>
             </li>
           </ol>
         </div>
       </div>
      </section>
    </div>
    <div class="content-right">
      <section class="skill">
        <header class="section-hd">
          <span class="section-title-l"></span>
          <h2 class="section-title">技能</h2>
          <span class="section-title-r"></span>
        </header>
        <div class="section-bd">

          <!--技能:WEB后端开发-->
          <div class="item">
            <header class="item-hd">
              <span class="item-time">WEB后端开发</span>
              <a class="btn item-more">掌握</a>
            </header>
            <div class="item-bd">
              <ul class="section-content">
                <li>熟练掌握Java语言基础，掌握Java面向对象思想编程</li>
                <li>熟练使用Eclipse、IDEA、Git、Maven项目管理和项目构建工具</li>
                <li>熟练使用关系型数据库Mysql</li>
                <li>熟悉Linux系统常用操作,具有文档编写能力和良好的编码习惯 </li>
                <li>了解使用数据库操作框架MyBatis，掌握SQL语句增删改查</li>
                <li>了解API开发基本流程，熟悉Restful 风格API设计</li>
                <li>了解使用非关系型数据库Redis</li>
                <li>了解使用Spring Boot、SpringMVC等主流框架</li>
                <li>了解JavaSE的常用API, 如集合、IO流、反射、泛型等等</li>
                <li>了解JavaWeb,如Servlet, JSP , Cookie ,Session</li>
                <li>了解JavaScript，HTML5，CSS，Ajax，jQuery </li>
                <li>了解Android开发</li>
              </ul>
            </div>
          </div>

          <!--React-->
          <div class="item">
            <header class="item-hd">
              <span class="item-time">数据库</span>
              <a class="btn item-more">掌握</a>
            </header>
            <div class="item-bd">
              <ul class="section-content">
                <li>熟悉关系型数据库技术，熟练使用关系型数据库Mysql</li>
                <li>了解非关系型数据库技术，使用非关系型数据库Nosql：Redis</li>
                <li>了解 MyBatis等数据库操作框架使用</li>
              </ul>
            </div>
          </div>

          <!--服务器|架构-->
          <div class="item">
            <header class="item-hd">
              <span class="item-time">服务器|架构</span>
              <a class="btn item-more">掌握</a>
            </header>
            <div class="item-bd">
              <ul class="section-content">
                <li>熟练掌握Nginx、Tomcat、Apache服务器使用</li>
                <li>熟练掌握常用软件（MySQL、Redis等）在服务器的搭建与使用</li>
                <li>熟练使用Centos(Linux)、Ubuntu云服务器并掌握线上环境和应用的部署</li>
                 <li>熟练掌握Git、Github、gradle、maven等工具使用</li>
                <li>了解Docker使用及Docker应用部署</li>
              </ul>
            </div>
          </div>

          <!--WEB前端开发-->
          <div class="item">
            <header class="item-hd">
              <span class="item-time">WEB前端开发</span>
              <a class="btn item-more">掌握</a>
            </header>
            <div class="item-bd">
              <ul class="section-content">
                <li>熟悉前端技术HTML、JavaScript、jQuery、CSS</li>
                <li>了解JS基本语法与知识，熟悉JS语法</li>
                <li>了解Android开发</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!--开源项目-->
      <section class="project">
        <header class="section-hd">
          <span class="section-title-l"></span>
          <h2 class="section-title">开源项目</h2>
          <span class="section-title-r"></span>
        </header>
        <div class="section-bd">
          以下是我的开源项目与学习总结，细节请点击链接查看文档
          <!--项目:博客-->
          <div class="item">
            <header class="item-hd">博客/Github</header>
            <div class="item-bd">
              <ul>
                <li>
                  <a href="https://blog.csdn.net/qq_26018075" target="_blank">CSDN博客</a>
                </li>
                <li>
                  <a href="https://github.com/zyjnicemoe" target="_blank">Github</a>
                </li>
                <li>
                  <a href="https://www.zyjblogs.cn" target="_blank">个人网站主页</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <!--奖项/证书-->
      <section class="prize">
        <header class="section-hd">
          <span class="section-title-l"></span>
          <h2 class="section-title">奖项/证书</h2>
          <span class="section-title-r"></span>
        </header>
        <div class="section-bd">

          <!--技能:WEB后端开发-->
          <div class="item">
            <header class="item-hd">
              <span class="item-time">获奖经历</span>
            </header>
            <div class="item-bd">
              <ul class="section-content">
                <li>2018年程校内序设计大赛“三等奖”</li>
                <li>2018年第四届计算机知识竞赛“二等奖”</li>
                <li>2018获得国家励志奖学金</li>
                <li>2018年获得三好学生</li>
                <li>2019年校内程序设计大赛“二等奖”</li>
                <li>2019年蓝桥杯大赛省赛“三等奖”</li>
                <li>2019均获得国家励志奖学金</li>
                <li>2019年获得三好学生</li>
                <li>2020年第十三届“认证杯”数学中国数学建模网络挑战赛全国比赛第一阶段“二等奖</li>
              </ul>
            </div>
          </div>
          <div class="item">
            <header class="item-hd">
              <span class="item-time">曾担任职务</span>
            </header>
            <div class="item-bd">
              <ul class="section-content">
                <li>2017-2018学生会纪检部干事</li>
                <li>2018-2019学生会纪检部副部长</li>
                <li>2019-2020党建办工室督察部成员</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

       <!--奖项/证书-->
      <section class="prize">
        <header class="section-hd">
          <span class="section-title-l"></span>
          <h2 class="section-title">优势</h2>
          <span class="section-title-r"></span>
        </header>
        <div class="section-bd">
            <div class="item">
            <header class="item-hd">
              <span class="item-time">自我评价</span>
            </header>
            <div class="item-bd">
              <ul class="section-content">
                <li>对Java开发有浓厚兴趣。</li>
                <li>做事沉稳，认真负责，为人诚实严谨，有较强的组织协调能力和沟通能力。</li>
                <li>自学能力强，喜欢钻研新技术、敢于面对和克服困难</li>
              </ul>
            </div>
          </div>
        </div>
      </section>
      <!--致谢-->
      <section class="thanks">
        <header class="section-hd">
          <span class="section-title-l"></span>
          <h2 class="section-title">致谢</h2>
          <span class="section-title-r"></span>
        </header>
        <div class="section-bd">
          <!--技能:WEB后端开发-->
          <div class="item">
            <h2 style="font-weight: bold;line-height: 24px;margin-top: 10px">
              感谢您在百忙之中阅读这份履历，诚挚的期望能得到面试的机会，
              希望有荣幸能为公司效力！再次致以我最诚挚的谢意！！
            </h2>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
    import $ from 'jquery'

    export default {
        name: 'Content',
        components: {},
        data() {
            return {
                msg: 'Welcome to Your Vue.js App'
            }
        },
        mounted() {
            $(document).ready(function () {
                if ($('ol:first').css('list-style-type') == 'none') { /* For IE6/7 only. */
                    $('ol ol').each(function (i, ol) {
                        ol = $(ol);
                        var level1 = ol.closest('li').index() + 1;
                        ol.children('li').each(function (i, li) {
                            li = $(li);
                            var level2 = level1 + '.' + (li.index() + 1);
                            li.prepend('<span>' + level2 + '</span>');
                        });
                    });
                }
            });
        }
    }
</script>
